<!--
:mc-config="{'saveUrl':'提交表单','getUrl':''}"
-->
<template>
  <el-row class="mc-questionnaire mc-on-shade" v-bind="$attrs" v-on="$listeners">
      <!-- 帮助信息 -->
      <el-col v-if="assist.show"  class="mc-questionnaire-assist" :span="24">
        <el-tag class="mc-questionnaire-assist-tag" @click="assistClick(1)">scope.row</el-tag>
        <el-dialog class="mc-questionnaire-assist-dialog"
          title="帮助"
          :visible.sync="assist.apiVisible"
          width="80%">
          内部控件自动绑定变量名scope.row.xxx 即可在提交时自动赋值
        </el-dialog>
      </el-col>
    <slot name="body" :row="form"></slot>
    <el-col>
        <slot name="bottom" :row="action"></slot>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'mc-questionnaire',
  data () {
    return {
        //表单数据
        form:{},
        assist: {show:window.iframeUi,apiVisible:false},
        action:{action:0}
    }
  },
  props:{
    //saveUrl 保存问卷地址 getUrl
    'mcConfig':{type:Object,default:null},
  },
  watch:{
    action:{
      handler(o,n){
        if(n.action==1){
          o.action=0;
          this.submit();
        }
      },
      deep:true
    }
  },
  computed:{

  },
  mounted () {
    this.refresh();
  },
  updated:function(){

  },
  methods:{
    refresh(){
      var request = this.$magicaltool.request;
      var _t = this;
      if(this.mcConfig && this.mcConfig.getUrl){
        var getUrl = this.mcConfig.getUrl;
        var pk = request.util.getUrlParameter("pk");
        if(!pk){
            var url = getUrl.indexOf("?")!=-1 ? getUrl+"&limit=1" : getUrl;
            request.axios({cache:true,$vue:this,url:url,method:'post',param:{} }).then(res=>{
              if(res.data){
                if(Array.isArray(res.data)){
                  if(res.data.length>0){
                    this.form = res.data[0];
                  }
                }else{
                  this.form = res.data;
                }
              }
            })
          return;
        }
        var param = {id:pk};
        request.axios({cache:true,$vue:this,url:getUrl,method:'get',param:param}).then(res=>{
            if(res.data){
              this.form = res.data;
            }
          })
        }
    },
    submit(){
      var request = this.$magicaltool.request;
      if(this.mcConfig && this.mcConfig.saveUrl){
        request.axios({cache:false,$vue:this,url:this.mcConfig.saveUrl,method:'post',param:this.form}).then(res=>{
          var pk = request.util.getUrlParameter("pk");
          if(pk!==null){
            this.$message({type:"success",message:"更新成功"})
          }else {
            this.$message({type:"success",message:"提交成功"})
          }
        })
      }else {
        this.$message({type:"warning",message:"请先配置保存地址mcConfig信息"})
      }
    },
    assistClick(){
      this.assist.apiVisible = true;
    }
  }
}
</script>

<style lang="scss">
    .mc-questionnaire-assist{
      display:none;
      position:absolute;
      left:0px;
      top:0px;
      width: 100px;
      z-index:10001;
    }
    .mc-questionnaire-assist-tag{
      color:#409EFF;
      height:unset;
      line-height:unset;
    }
    .magicalcoder-dragging .mc-questionnaire-assist{
      display:block;
    }
    .magicalcoder-dragging .mc-questionnaire{
      padding: 10px;
      border: 1px solid #a0a0a0;
    }
    .mc-questionnaire-assist-dialog{
      z-index: 99999 !important;
    }
    .mc-questionnaire>.mc-ui-absolute-pane{
      min-height: 60px;
    }
</style>
